<template>
  <div
    :class="advertisingShow ? 'advertising' : 'advertising advertising_close'"
    @mousemove="show"
    ref="advertising"
  >
    <span class="advertising_btn" @click.stop="close"></span>
    <el-carousel height="300px" direction="vertical" :interval="5000"  >
      <el-carousel-item v-for="item in imgs" :key="item.id">
        <router-link :to="item.route" class="advertising_bg">
          <img :src="item.all_path" alt="" />
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      advertisingShow: true,
    };
  },
  methods: {
    show() {
      this.advertisingShow = true;
    },
    close() {
      this.advertisingShow = false;
    },
    advertisingOpen() {},
  },
  props: {
    toPath: {
      type: String,
      default: "",
    },
    imgs: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>

<style lang="less">
.advertising {
  position: fixed;
  z-index: 2020;
  left: 0;
  margin-top: -150px;
  top: 50%;
  width: 300px;
  height: 300px;
  transition: transform 1s;

  .advertising_btn {
    background: url("../assets/img/ad/tb_1.png");
    background-size: 100%;
    display: block;
    position: absolute;
    right: 20px;
    top: -20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .advertising_bg {
    width: 100%;
    height: 100%;
    display: block;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
.advertising_close {
  transform: translateX(-250px);
}
// .advertising:hover {
//   transform: translateX(280px);
// }
// .advertising_show {
//   transform: translateX(-280px);
// }
</style>
